<script setup lang="ts">
import { ref, reactive } from 'vue';

// 标签页激活名称
const activeName = ref('prescription');

// 药品列表数据
const medicineList = reactive([
  { id: 1, name: '流行性感冒(除季节)', stock: 112, price: 147.04, selected: false },
  { id: 2, name: '复方感冒灵颗粒(双效)', stock: 169, price: 62.77, selected: false },
  { id: 3, name: '清火栀麦片', stock: 24, price: 192.71, selected: true },
  { id: 4, name: '黄道益(黄道益)', stock: 43, price: 94.65, selected: true },
  { id: 5, name: '三乙醇胺乳膏(比亚芬)', stock: 102, price: 88.73, selected: true },
  { id: 6, name: '对乙酰氨基酚滴剂(坦克)', stock: 175, price: 100.42, selected: true },
  { id: 7, name: '骨痛灵酊', stock: 177, price: 11.17, selected: true },
  { id: 8, name: '地喘黄铵合片(普乐沛)', stock: 36, price: 126.98, selected: false },
  { id: 9, name: '感冒水(同仁堂)', stock: 197, price: 173.30, selected: false }
]);

// 处方药品数据
const prescriptionList = reactive([
  { id: 3, name: '清火栀麦片', dosage: 2, unit: '片', method: '口服', frequency: '一天一次' },
  { id: 4, name: '黄道益(黄道益)', dosage: 2, unit: '片', method: '口服', frequency: '一天一次' },
  { id: 5, name: '三乙醇胺乳膏(比亚芬)', dosage: 2, unit: '片', method: '口服', frequency: '一天一次' },
  { id: 6, name: '对乙酰氨基酚滴剂(坦克)', dosage: 2, unit: '片', method: '口服', frequency: '一天一次' },
  { id: 7, name: '骨痛灵酊', dosage: 2, unit: '片', method: '口服', frequency: '一天一次' }
]);

// 用药方式选项
const methodOptions = [
  { label: '口服', value: '口服' },
  { label: '涂抹', value: '涂抹' },
  { label: '静脉注射', value: '静脉注射' }
];

// 频率选项
const frequencyOptions = [
  { label: '一天一次', value: '一天一次' },
  { label: '一天两次', value: '一天两次' },
  { label: '一天三次', value: '一天三次' },
  { label: '需要时使用', value: '需要时使用' }
];

// 搜索关键词
const searchKeyword = ref('');

// 处方模板选项
const prescriptionTemplates = [
  { label: '中成药处方 1', value: 'template1' },
  { label: '西成药处方 1', value: 'template2' }
];

// 选择处方模板
const selectedTemplate = ref('');

// 添加药品到处方
const addToPrescription = (medicine) => {
  const index = prescriptionList.findIndex(item => item.id === medicine.id);
  if (index === -1) {
    prescriptionList.push({
      id: medicine.id,
      name: medicine.name,
      dosage: 2,
      unit: '片',
      method: '口服',
      frequency: '一天一次'
    });
  }
};

// 从处方中移除药品
const removeFromPrescription = (medicine) => {
  const index = prescriptionList.findIndex(item => item.id === medicine.id);
  if (index !== -1) {
    prescriptionList.splice(index, 1);
  }
};

// 批量设置
const showBatchSettings = ref(false);
const batchSettings = reactive({
  method: '口服',
  frequency: '一天一次'
});

// 应用批量设置
const applyBatchSettings = () => {
  prescriptionList.forEach(item => {
    item.method = batchSettings.method;
    item.frequency = batchSettings.frequency;
  });
  showBatchSettings.value = false;
};
</script>

<template>
  <div class="prescription-suggestions">
    <!-- 标签页 -->
    <el-tabs v-model="activeName" class="prescription-tabs">
      <el-tab-pane label="问诊信息" name="consultation"></el-tab-pane>
      <el-tab-pane label="处方用药" name="prescription">
        <div class="prescription-content">
          <!-- 处方模板选择 -->
          <div class="template-selection">
            <el-button type="primary" class="template-btn">检查项目 1</el-button>
            <el-button type="primary" class="template-btn">中成药处方 1</el-button>
            <el-button type="primary" class="template-btn">西成药处方 1</el-button>
            <el-button type="primary" plain class="add-btn">
              <i class="el-icon-plus"></i> 添加处方
            </el-button>
          </div>

          <!-- 药品选择区域 -->
          <div class="medicine-selection">
            <!-- 左侧药品列表 -->
            <div class="medicine-list-container">
              <div class="list-header">
                <el-button type="default" class="all-btn">全部药品</el-button>
                <div class="search-box">
                  <el-input v-model="searchKeyword" placeholder="输入药品名称" clearable>
                    <template #suffix>
                      <i class="el-icon-search"></i>
                    </template>
                  </el-input>
                </div>
              </div>

              <!-- 药品列表表格 -->
              <el-table :data="medicineList" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="药品名称" />
                <el-table-column prop="stock" label="库存" width="80" />
                <el-table-column prop="price" label="价格 ¥" width="100" />
              </el-table>

              <div class="add-medicine-btn">
                <el-button type="primary" plain>添加药品</el-button>
              </div>
            </div>

            <!-- 右侧处方药品 -->
            <div class="prescription-detail">
              <div class="detail-header">
                <h3>处方用药</h3>
              </div>

              <!-- 处方药品表格 -->
              <el-table :data="prescriptionList" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="药品名称" />
                <el-table-column label="单次用量" width="120">
                  <template #default="{row}">
                    <div class="dosage-input">
                      <el-input-number v-model="row.dosage" :min="1" :max="10" size="small" />
                      <span class="unit">{{ row.unit }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="用法" width="120">
                  <template #default="{row}">
                    <el-select v-model="row.method" size="small">
                      <el-option
                        v-for="option in methodOptions"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="频度" width="120">
                  <template #default="{row}">
                    <el-select v-model="row.frequency" size="small">
                      <el-option
                        v-for="option in frequencyOptions"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 底部操作按钮 -->
              <div class="action-buttons">
                <el-button type="primary" plain @click="showBatchSettings = true">批量设置</el-button>
                <el-button type="primary" plain>附加费用</el-button>
                <el-button type="danger" plain>删除处方单</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史病例" name="history"></el-tab-pane>
    </el-tabs>

    <!-- 批量设置弹窗 -->
    <el-dialog title="批量设置" v-model="showBatchSettings" width="30%">
      <div class="batch-settings">
        <div class="setting-item">
          <span class="label">用法：</span>
          <el-select v-model="batchSettings.method">
            <el-option
              v-for="option in methodOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </div>
        <div class="setting-item">
          <span class="label">频度：</span>
          <el-select v-model="batchSettings.frequency">
            <el-option
              v-for="option in frequencyOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showBatchSettings = false">取消</el-button>
          <el-button type="primary" @click="applyBatchSettings">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.prescription-suggestions {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.prescription-tabs {
  margin-bottom: 20px;
}

.template-selection {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
}

.template-btn {
  font-size: 14px;
}

.add-btn {
  margin-left: auto;
}

.medicine-selection {
  display: flex;
  gap: 20px;
}

.medicine-list-container {
  flex: 1;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.list-header {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
  align-items: center;
}

.all-btn {
  margin-right: 10px;
}

.search-box {
  flex: 1;
}

.add-medicine-btn {
  padding: 10px;
  display: flex;
  justify-content: center;
}

.prescription-detail {
  flex: 1;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.detail-header {
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.detail-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.dosage-input {
  display: flex;
  align-items: center;
}

.unit {
  margin-left: 5px;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  gap: 10px;
}

.batch-settings {
  padding: 10px 0;
}

.setting-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.label {
  width: 60px;
  text-align: right;
  margin-right: 10px;
}
</style>
